<!DOCTYPE html>
<html lang="en">
<head>
  <!-- 基础设置 -->
  <meta charset="utf-8">
  <title>03-html+css+js部分</title>

  <!-- 样式表引入 -->
  <style>
    /* 1. 全局样式重置 */
    * {
      margin: 0; /* 清除所有元素默认外边距 */
      padding: 0; /* 清除所有元素默认内边距 */
      /*background-color: #24254c;*/
    }
    html{
      background-color:#100d2a;
    }
    /* 2. 大容器布局 */
    #box {
      max-width: 1300px; /* 设置最大宽度限制 */
      margin: 0 auto; /* 水平居中 */
      background-color:#252240; /* 设置背景颜色 */
      color: white; /* 设置文本颜色 */
      font-family: "Microsoft YaHei", sans-serif; /* 设置字体 */
      border-radius: 12px; /* 设置圆角 */
      overflow: hidden; /* 隐藏溢出内容 */
      margin-top: 20px; /* 顶部外边距 */
      margin-bottom: 20px; /* 底部外边距 */
    }

    /* 3. 顶部导航栏 */
    .top-daoHan {
      display: flex; /* 使用flex布局 */
      justify-content: space-between; /* 子元素两端对齐，中间均匀分布 */
      align-items: center; /* 垂直居中对齐 */
      padding: 15px 25px; /* 设置内边距 */
      border-bottom: 1px solid rgba(255,255,255,0.2); /* 添加底部边框，使用rgba设置透明度 */
    }

    /* 城市显示区域 */
    .city_display {
      display: flex; /* 使用flex布局 */
      align-items: center; /* 垂直居中对齐 */
      font-size: 20px; /* 设置字体大小 */
      font-weight: bold; /* 设置字体粗细 */
    }
    #city_btn {
      color: #ccc; /* 设置文本颜色 */
      margin-left: 8px; /* 设置左侧外边距 */
      cursor: pointer; /* 设置鼠标指针样式 */
      transition: color 0.3s; /* 添加颜色过渡效果 */
    }
    #city_btn:hover {
      color: #fff; /* 鼠标悬停时文本颜色变化 */
    }

    /* 城市内容输入框(默认是隐藏的) */
    .input_area {
      display: none; /* 默认隐藏 */
      margin-top: 10px; /* 上边距 */
      position: absolute; /* 绝对定位，不影响其他元素 */
      top: 40px;
      left: 340px;;
    }
    .city-input {
      padding: 6px; /* 内边距 */
      border: 1px solid #93c5fd; /* 边框 */
      border-radius: 25px;
      width: 180px; /* 宽度 */
      outline: none; /* 去掉点击时的默认轮廓线 */
      font-size: 19px; /* 字体大小*/
      color: #5a335a;/* 字体颜色 */
    }
    /* 确认框 */
    .affirm_btn {
      padding: 6px 12px; /* 内边距 */
      background-color: #3b82f6; /* 背景色 */
      color: white; /* 字体颜色 */
      border: none; /* 无边框 */
      border-radius: 10px;
      font-size: 16px;/* 字体大小 */
      cursor: pointer; /* 鼠标指针样式 */
    }

    .city-input:focus {
      background-color: #fff; /* 聚焦时背景色变化 */
    }
    .affirm_btn:hover {
      background-color: #0ea574; /* 鼠标悬停时背景色变化 */
    }

    /* 天气预报标题 */
    .weather_report_font {
      font-size: 48px; /* 设置字体大小 */
      font-weight: bold; /* 设置字体粗细 */
      text-shadow: 2px 2px 8px rgba(0,0,0,0.3); /* 添加文字阴影 */
      color: white; /* 设置文本颜色 */
    }

    /* 日期信息 */
    .day_drc {
      display: flex; /* 使用flex布局 */
      gap: 12px; /* 设置子元素间距 */
      font-size: 18px; /* 设置字体大小 */
      font-weight: bold;
    }

    /* 4. 主体内容区域 */
    .main_content {
      padding: 25px; /* 设置内边距 */
      border-radius: 8px; /* 设置圆角 */
      margin: 15px; /* 添加外边距 */
    }

    /* 今日天气+空气质量布局 */
    .current_weather {
      display: flex; /* 使用flex布局 */
      justify-content: space-between; /* 子元素两端对齐，中间均匀分布 */
      align-items: stretch; /* 子元素高度拉伸 */
      gap: 25px; /* 设置子元素间距 */
      /*border: 1px solid rgba(255,255,255,0.15); !* 添加边框 *!*/
      border-radius: 10px; /* 设置圆角 */
      padding: 20px; /* 增加内边距 */
    }

    /* 左侧：今日基本信息 */
    .today_base_information {
      flex: 3; /* 占据3份空间 */
      border: 1px solid rgba(255,255,255,0.1); /* 添加边框 */
      border-radius: 10px; /* 设置圆角 */
      padding: 15px; /* 增加内边距 */
      background-color: #312e55;
    }

    /* 温度显示 */
    .temp_box {
      display: flex; /* 使用flex布局 */
      align-items: flex-start; /* 顶部对齐，确保温度符号与数字顶部对齐 */
      margin-bottom: 15px; /* 底部外边距 */
    }
    .temp {
      font-size: 42px; /* 设置字体大小 */
      font-weight: bold; /* 设置字体粗细 */
    }
    .fuHao {
      font-size: 28px; /* 设置字体大小 */
      margin-top: 5px; /* 设置顶部外边距 */
    }

    /* 天气图标+类型 */
    .icon_and_type {
      display: flex; /* 使用flex布局 */
      align-items: center; /* 垂直居中对齐 */
      margin-top: 15px; /* 设置顶部外边距 */
      margin-bottom: 20px; /* 设置底部外边距 */
    }
    .weather_icon {
      width: 50px; /* 设置宽度 */
      margin-right: 15px; /* 设置右侧外边距 */
    }
    .weather-type {
      font-size: 18px; /* 设置字体大小 */
      font-weight: bold; /* 设置字体粗细 */
    }

    /* 详细信息列表 */
    .message_list {
      list-style: none; /* 移除默认列表样式 */
      margin-top: 15px; /* 设置顶部外边距 */
    }
    .message_list li {
      line-height: 28px; /* 设置行高 */
      font-size: 15px; /* 设置字体大小 */
      padding-left: 10px; /* 左侧内边距 */
      border-bottom: 2px solid rgba(255,255,255,0.1); /* 下侧边框 */
      margin-bottom: 8px; /* 底部外边距 */
    }
    /* 右侧：空气质量 */
    .air_quality_box {
      flex: 2; /* 占据2份空间 */
      border-radius: 10px; /* 设置圆角 */
      padding: 15px; /* 设置内边距 */
      border: 1px solid #464366; /* 添加边框 */
      background-color: #312e55;
    }
    .aqi_display {
      display: flex; /* 使用flex布局 */
      align-items: center; /* 垂直居中对齐 */
      margin-bottom: 15px; /* 底部外边距 */
    }
    .api_number {
      font-size: 56px; /* 设置字体大小 */
      color: green; /* 设置文本颜色 */
      font-weight: bold; /* 设置字体粗细 */
    }
    .api_level {
      font-size: 18px; /* 设置字体大小 */
      margin-left: 15px; /* 设置左侧外边距 */
      padding: 5px 10px; /* 设置内边距 */
      background-color: #413d67; /* 背景 */
      border-radius: 5px; /* 设置圆角 */
    }
    .aqi_text {
      margin: 15px 0; /* 设置上下外边距 */
      font-size: 15px; /* 设置字体大小 */
      line-height: 22px; /* 设置行高 */
      padding: 10px; /* 设置内边距 */
      background-color: rgba(255,255,255,0.1);/*背景颜色*/
      border-radius: 5px; /* 设置圆角 */
    }
    .air_quality_arg {
      list-style: none; /* 移除默认列表样式 */
    }
    .air_quality_arg li {
      line-height: 26px; /* 设置行高 */
      font-size: 15px; /* 设置字体大小 */
      padding: 2px 5px; /* 设置内边距 */
      border-radius: 3px; /* 设置圆角 */
      border-bottom: 2px solid #464366; /* 下侧边框 */
    }
    .air_quality_arg li:hover {
      background-color: rgba(255,255,255,0.1); /* 鼠标悬停时背景色变化 */
    }

    /* 5. 整点+未来三天预报 */
    .integer_and_future {
      display: flex; /* 使用flex布局 */
      justify-content: space-between; /* 子元素两端对齐，中间均匀分布 */
      margin-top: 25px; /* 设置顶部外边距 */
      gap: 25px; /* 设置子元素间距 */
      border-radius: 10px; /* 设置圆角 */
      padding: 20px; /* 增加内边距 */
    }
    /* 整点预报容器：控制标题和列表垂直排列 */
    .integer_container {
      flex: 5; /* 继承原integer_box的宽度占比， 占父类容量的5份 */
      display: flex; /* 启用flex布局 */
      flex-direction: column; /* 垂直排列子元素，使标题在列表上方 */
      border: 1px solid rgba(255,255,255,0.1); /* 边框样式 */
      border-radius: 8px; /* 圆角 */
    }

    /* 整点报时 */
    .integer_box {
      display: flex; /* 保留水平排列的整点卡片 */
      height: 500px; /* 固定高度 */
      flex-wrap: nowrap; /* 禁止换行，确保横向滚动 */
      overflow-x: auto; /* 水平滚动条 */
      padding-bottom: 15px; /* 底部内边距 */
      padding: 15px; /* 内边距 */
      background-color: #23203d; /* 背景色 */
    }

    .integer_item {
      display: flex; /* 使用flex布局 */
      flex-direction: column; /* 垂直排列 */
      align-items: center; /* 水平居中对齐 */
      margin: 0 8px; /* 设置左右外边距 */
      min-width: 60px; /* 设置最小宽度 */
      padding: 10px; /* 增加内边距 */
      border: 1px solid rgba(255,255,255,0.08); /* 添加边框 */
      border-radius: 8px; /* 设置圆角 */
      background-color: #312e55; /* 背景 */
    }
    .integer_item:hover {
      transform: translateY(-5px); /* 鼠标悬停时向上移动 */
      box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* 添加阴影效果 */
      background-color: #443f6b; /* 背景色变化 */
    }
    .integer_date {
      font-size: 14px; /* 设置字体大小 */
      margin-bottom: 8px; /* 设置底部外边距 */
      font-weight: bold; /* 设置字体粗细 */
    }
    .integer_icon {
      width: 32px; /* 设置宽度 */
      margin: 10px 0; /* 设置上下外边距 */
    }
    .integer_temp, .wind_direction {
      font-size: 14px; /* 设置字体大小 */
      margin-top: 8px; /* 设置顶部外边距 */
    }

    /* 未来三天预报容器*/
    .future_container {
      flex: 5; /* 继承原future_box的宽度占比 占父类容量的5份 */
      display: flex;/*使用flex布局*/
      flex-direction: column; /* 标题在上，列表在下 */
      border: 1px solid rgba(255,255,255,0.1);/*边框*/
      border-radius: 8px;/*圆角*/
    }

    /* 未来三天预报列表*/
    .future_box {
      display: flex;
      flex-direction: column; /* 保持垂直排列子项 */
      padding: 15px;
      background-color: #23203d;
      height: 500px; /* 总高度设置为500px */
      min-width: 80px;
    }

    .future_item {
      display: flex; /* 使用flex布局 */
      height: 145px;
      flex-direction: column; /* 垂直排列 */
      align-items: center; /* 水平居中对齐 */
      padding: 8px; /* 增加内边距 */
      border: 1px solid rgba(255,255,255,0.08); /* 添加边框 */
      border-radius: 8px; /* 设置圆角 */
      background-color: #312e55; /*背景 */
      margin-bottom: 10px; /* 底部外边距 */
    }
    .future_item:hover {
      transform: translateY(-3px); /* 鼠标悬停时向上移动 */
      box-shadow: 0 3px 8px rgba(0,0,0,0.2); /* 添加阴影效果 */
      background-color:#443f6b; /* 背景色变化 */
    }
    .future_date {
      font-size: 15px; /* 设置字体大小 */
      margin-bottom: 4px; /* 设置底部外边距 */
      font-weight: bold; /* 设置字体粗细 */
    }
    .future_icon {
      width: 40px; /* 设置宽度 */
      margin: 5px 0; /* 设置上下外边距 */
      filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3)); /* 添加图标阴影 */
    }
    .temp_range {
      display: flex; /* 使用flex布局 */
      justify-content: space-between; /* 子元素两端对齐，中间均匀分布 */
      width: 90px; /* 设置宽度 */
      margin-top: 5px; /* 设置顶部外边距 */
      font-weight: bold; /* 设置字体粗细 */
    }
    .high-temp { color: #ef4444; }  /* 设置高温文本颜色 */
    .low-temp { color: #3b82f6; } /* 设置低温文本颜色 */
    .weather_type, .wind_direction {
      font-size: 14px; /* 设置字体大小 */
      margin-top: 8px; /* 设置顶部外边距 */
    }

    /* 6. 图表区域 */
    .graph {
      padding: 25px; /* 设置内边距 */
      text-align: center; /* 文本居中对齐 */
      border-radius: 8px; /* 设置圆角 */
      margin: 15px; /* 添加外边距 */
      background-color: rgba(255,255,255,0.05); /* 添加半透明背景 */
      border: 1px solid rgba(255,255,255,0.1); /* 添加边框 */
    }
    #title {
      font-size: 18px; /* 设置字体大小 */
      margin-bottom: 15px; /* 设置底部外边距 */
      font-weight: bold; /* 设置字体粗细 */
      padding-bottom: 8px; /* 设置底部内边距 */
      border-bottom: 1px solid rgba(255,255,255,0.1); /* 添加底部边框 */
    }


    /* 7. 文字说明样式 */
    .integer_font_dec, .future_font_dec {
      font-size: 16px; /* 设置字体大小 */
      font-weight: bold; /* 设置字体粗细 */
      margin-bottom: 15px; /* 设置底部外边距 */
      padding: 5px 10px; /* 设置内边距 */
      background-color: rgba(255,255,255,0.05); /* 设置半透明背景 */
      border-radius: 5px; /* 设置圆角 */
      display: inline-block; /* 行内块元素 */
    }
  </style>
</head>
<body>
<!-- 大背景容器 -->
<div id="box">
  <!-- 顶部导航栏 -->
  <div class="top-daoHan">
    <!-- 城市显示区域 -->
    <div class="city_display">
      <!-- 当前默认城市：都匀 -->
      都匀
      <!-- 城市切换按钮 -->
      <span id="city_btn">[切换]</span>
    </div>

    <!-- 城市内容输入框(默认是隐藏的) -->
    <span class="input_area">
      <!-- 城市输入框 -->
      <input type="text" placeholder="请输入城市名称" class="city-input"/>
      <!-- 确认按钮 -->
      <button class="affirm_btn">确认</button>
    </span>

    <!-- 天气预报字样 -->
    <div class="weather_report_font">天气预报</div>

    <div class="day_drc">
      <!-- 日期信息 -->
      <div class="now_date">2025-06-06</div>
      <div class="now_day">今天</div>
    </div>
  </div>

  <!-- 主体内容 -->
  <div class="main_content">
    <!-- 上侧显示：今天天气+空气质量 -->
    <div class="current_weather">
      <!-- 左侧：今天基本信息显示区域 -->
      <div class="today_base_information">
        <!-- 温度主显示区域(盒子) -->
        <div class="temp_box">
          <!-- 温度 -->
          <span class="temp">25</span>
          <!-- 符号 -->
          <span class="fuHao">°</span>
        </div>
        <!-- 天气图标+类型 -->
        <div class="icon_and_type">
          <!-- 图标 -->
          <img src="./image/qing.png" class="weather_icon" alt="天气图标">
          <!-- 类型 -->
          <span class="weather-type">晴</span>
        </div>
        <!-- 详细信息列表 -->
        <ul class="message_list">
          <li>体感温度：<span class="perceived_temp">24°</span></li><!--perceived:体感-->
          <li>相对湿度：<span class="rela_humidity">45%</span></li><!--relative：相对-->
          <li>风速：<span class="wind_level">2.58</span></li>
          <li>气压：<span class="pressure">1013hpa</span></li>
          <li>能见度：<span class="visibility">10km</span></li>
        </ul>
      </div>
      <!-- 右侧显示空气质量 -->
      <div class="air_quality_box">
        <!-- 空气指数显示 -->
        <div class="aqi_display">
          <!--空气指数数字-->
          <div class="api_number">	Ⅰ </div>
          <!--空气质量类别(等级)-->
          <div class="api_level">优</div>
        </div>
        <!-- 评价描述 -->
        <div class="aqi_text">
          空气质量令人满意，基本无空气污染
        </div>
        <!-- 空气质量参数 -->
        <div class="air_quality_arg">
          <!--PM2.5-->
          <li>PM2.5：<span  class="pm2_5">22</span></li>
          <!--PM10-->
          <li>PM10：<span  class="pm10">35</span></li>
          <!--NO2-->
          <li>NO2：<span  class="no2">8</span></li>
          <!--co浓度-->
          <li>co：<span  class="co">3</span></li>
          <!--臭氧-->
          <li>O3：<span  class="no2">44</span></li>
        </div>
      </div>
    </div>

    <!-- 下侧显示今天的整点情况和未来三天的预报情况 -->
    <div class="integer_and_future"><!--整点和将来-->
      <!--整点容器-->
      <div class="integer_container">
        <!--文字说明-->
        <span class="integer_font_dec">今日整点预报</span>
        <!-- 整点盒子 -->
        <ul class="integer_box">
          <!-- 整点列表情况 (7个) -->
          <!------------------1-------------------->
          <li class="integer_item">
            <!--整点时间-->
            <div class="integer_date">03:00</div>
            <!--到时候根据返回的天气现象更改天气图标-->
            <img src="./image/qing.png" class="integer_icon" alt="天气图标">
            <!--温度-->
            <div class="integer_temp">12°</div>
            <!--风向-->
            <div class="wind_direction">东风</div>
          </li>
          <!---------------end-------------------->
          <!------------------2-------------------->
          <li class="integer_item">
            <!--整点时间-->
            <div class="integer_date">06:00</div>
            <!--到时候根据返回的天气现象更改天气图标-->
            <img src="./image/qing.png" class="integer_icon" alt="天气图标">
            <!--温度-->
            <div class="integer_temp">12°</div>
            <!--风向-->
            <div class="wind_direction">东风</div>
          </li>
          <!---------------end-------------------->
          <!------------------3-------------------->
          <li class="integer_item">
            <!--整点时间-->
            <div class="integer_date">09:00</div>
            <!--到时候根据返回的天气现象更改天气图标-->
            <img src="./image/qing.png" class="integer_icon" alt="天气图标">
            <!--温度-->
            <div class="integer_temp">12°</div>
            <!--风向-->
            <div class="wind_direction">东风</div>
          </li>
          <!---------------end-------------------->
          <!------------------4-------------------->
          <li class="integer_item">
            <!--整点时间-->
            <div class="integer_date">12:00</div>
            <!--到时候根据返回的天气现象更改天气图标-->
            <img src="./image/qing.png" class="integer_icon" alt="天气图标">
            <!--温度-->
            <div class="integer_temp">12°</div>
            <!--风向-->
            <div class="wind_direction">东风</div>
          </li>
          <!---------------end-------------------->
          <!------------------5-------------------->
          <li class="integer_item">
            <!--整点时间-->
            <div class="integer_date">15:00</div>
            <!--到时候根据返回的天气现象更改天气图标-->
            <img src="./image/qing.png" class="integer_icon" alt="天气图标">
            <!--温度-->
            <div class="integer_temp">12°</div>
            <!--风向-->
            <div class="wind_direction">东风</div>
          </li>
          <!---------------end-------------------->
          <!------------------6-------------------->
          <li class="integer_item">
            <!--整点时间-->
            <div class="integer_date">18:00</div>
            <!--到时候根据返回的天气现象更改天气图标-->
            <img src="./image/qing.png" class="integer_icon" alt="天气图标">
            <!--温度-->
            <div class="integer_temp">12°</div>
            <!--风向-->
            <div class="wind_direction">东风</div>
          </li>
          <!---------------end-------------------->
          <!------------------7-------------------->
          <li class="integer_item">
            <!--整点时间-->
            <div class="integer_date">21:00</div>
            <!--到时候根据返回的天气现象更改天气图标-->
            <img src="./image/qing.png" class="integer_icon" alt="天气图标">
            <!--温度-->
            <div class="integer_temp">12°</div>
            <!--风向-->
            <div class="wind_direction">东风</div>
          </li>
          <!---------------end-------------------->
        </ul>
      </div>
      <!--未来三天容器-->
      <div class="future_container">
        <!--文字说明-->
        <span class="future_font_dec">未来三天预报</span>
        <!--未来三天天气预报盒子-->
        <ul class="future_box">
          <!------------- 未来第1天列表 ------------>
          <li class="future_item">
            <!--日期-->
            <div class="future_date">2015-06-07</div>
            <!--到时候根据返回的白天天气现象更改天气图标-->
            <img src="./image/qing.png" class="future_icon" alt="天气图标">
            <!--温度范围-->
            <div class="temp_range">
              <!--最高温度-->
              <span class="high-temp">28°</span>
              <!--最低温度-->
              <span class="low-temp">20°</span>
            </div>
            <!--白天天气现象-->
            <div class="weather_type">多云</div>
            <!--风向-->
            <div class="wind_direction">东南风</div>
          </li>
          <!---------------end-------------------->

          <!------------- 未来第2天列表 ------------>
          <li class="future_item">
            <!--日期-->
            <div class="future_date">2015-06-07</div>
            <!--到时候根据返回的白天天气现象更改天气图标-->
            <img src="./image/qing.png" class="future_icon" alt="天气图标">
            <!--温度范围-->
            <div class="temp_range">
              <!--最高温度-->
              <span class="high-temp">28°</span>
              <!--最低温度-->
              <span class="low-temp">20°</span>
            </div>
            <!--白天天气现象-->
            <div class="weather_type">多云</div>
            <!--风向-->
            <div class="wind_direction">东南风</div>
          </li>
          <!---------------end-------------------->

          <!------------- 未来第3天列表 ------------>
          <li class="future_item">
            <!--日期-->
            <div class="future_date">2015-06-07</div>
            <!--到时候根据返回的白天天气现象更改天气图标-->
            <img src="./image/qing.png" class="future_icon" alt="天气图标">
            <!--温度范围-->
            <div class="temp_range">
              <!--最高温度-->
              <span class="high-temp">28°</span>
              <!--最低温度-->
              <span class="low-temp">20°</span>
            </div>
            <!--白天天气现象-->
            <div class="weather_type">多云</div>
            <!--风向-->
            <div class="wind_direction">东南风</div>
          </li>
          <!---------------end-------------------->
        </ul>
      </div>
    </div>
  </div>
  <!-- 图表区域 -->
  <div class="graph">
    <div id="title">今天的温度趋势</div>

  </div>
</div>
<!--js的框架jquery的引入-->
<script src="./js/jquery.min.js"></script>
<!--js脚本-->
<script>
  /*首先是加载整个页面的时候产生数据请求和数据更新的事件 */
  $(document).ready(function() {/* 类似于windos.onload() */
    //说明：本案例我使用的是心知天气api + OpenWeather api
    //心知天气api：用于获取今天的天气信息
    //OpenWeather api：我用来获取今天的实时数据、今天空气质量、今天整时天气、未来3天的天气
    //但是他需要的参数是经度和纬度，因此到时候我们根据城市名称获取经纬度


    //1.1 心知天气的api秘钥
    let xinZhi_weather_api_key = "SWpbp8iToMQTIzXEJ";

    //1.1 OpenWeather的api秘钥
    let open_weather_api_key = "99fa10ae4a6ddeed48f87bdb9562454c";//

    //1.2默认城市设置为都匀
    let currentCity = "都匀";

    //1.3经纬度
    let jinDu;//经度
    let weiDu;//纬度

    //1.4存储今天的时间
    let now_time;

    //2.每一次点开页面对当前城市进行实时初始化
    loadCityWeatherData(currentCity);


    //3.1对于在html阶段的城市切换按钮的点击事件

    /**** 经过不断调试使用此方法处理事件将无法重复点击[切换]按钮 ****/
    // $("#city-btn").click(function(){
    // 	//点击按钮时候隐藏和显示输入框
    // 	$(".input_area").toggle();// 显示/隐藏输入框
    // });
    /* ************************end*********************** */


    /**
     * 于是使用事件委托
     * 参数解释：
     * on() 方法的第一个参数是事件类型（click）
     * 第二个参数是选择器（#city_btn），指定触发事件的目标元素
     * 第三个参数是事件处理函数
     */
    $(".top-daoHan").on("click", "#city_btn", function() {
      // 事件处理逻辑
      $(".input_area").toggle();// 显示/隐藏输入框
    });


    //3.2确认按钮点击事件
    $(".affirm_btn").click(function() {
      //提取出输入框中的内容(注意将前后空白去掉)
      let city = $(".city-input").val().trim();

      //判断city是不是为空，如果是则在js中判定为假
      //如果不是空那么在js中则判定为真就更行城市和城市的天气数据
      if(city) {
        //更新城市名字和经纬度
        currentCity = city;
        //点击完确认之后隐藏输入框
        $(".input_area").hide();

        //将新的城市名字更新显示出来
        $(".city_display").html(currentCity + "<span id='city_btn'>[切换]</span>");

        //对新的城市更新天气数据
        loadCityWeatherData(currentCity); // 加载新城市天气数据
      }
    });

    /**********************函数书写区域******************************/

    //加载城市天气数据
    function loadCityWeatherData(city) {//在js中方法里面的参数无需定义，只需写即可
      //1.1.向心知天气获得今天的实时数据(参数是城市)
      getCurrentCityWeatherData(city);

      //1.2先获取城市坐标（经纬度）
      getCityCoordinates(city);//得到经纬度
    }
    //1.先获取城市坐标（经纬度）
    function getCityCoordinates(city) {//得到经纬度
      $.ajax({
        //1.OpenWeather请求数据
        url: "http://api.openweathermap.org/geo/1.0/direct",//为了获取经纬度
        method: "GET",
        data: {
          //错误写法：
          // q: currentCity + "," + "CN", //“当前城市,中国” ==》防止同名

          //经过查阅资料使用如下方法：
          q: `${city},CN`,

          appid: open_weather_api_key
        },
        success: function(geoRes) {
          if(geoRes && geoRes.length > 0) {
            //geoRes：检查响应是否存在（不是null或undefined）
            // geoRes.length > 0：检查响应数组中至少有一个元素（表示找到了匹配的城市）
            jinDu = geoRes[0].lat;
            weiDu = geoRes[0].lon;

            //测试后成功打印
            // console.log(jinDu+" "+weiDu);

            //2.获得当前天气的信息(参数是经纬度)
            getCurrentWeatherOfOpenWeather(jinDu,weiDu);

            //3.今天整时天气(参数是经纬度)未来3天的天气(参数是经纬度)
            getCurrentIntegerAndFutureData(jinDu,weiDu);

            //4.获得当前天气的空气质量(参数是经纬度)
            getCurrentCityAirQuality(jinDu,weiDu);


          } else {
            alert("城市未找到，请检查名称");
          }
        },
        error: function(error) {
          console.error("获取坐标失败:", error);
        }
      });
    }

    //2.获得今天的实时数据
    function getCurrentCityWeatherData(city) {
      //向心知天气 api请求数据
      /**
       * jQuery Ajax方法:$.ajax({请求配置});
       */
      $.ajax({
        //1.心知天气请求今天的实时数据
        url: "https://api.seniverse.com/v3/weather/now.json",//实时天气
        //2.HTTP 请求方法
        method: "get",
        //3.发送到服务器的数据
        data: {
          key: xinZhi_weather_api_key,
          location: city
        },
        //成功回调
        /**
         * @param res 接受返回的json对象
         */
        success: function(res) {  //预期返回的数据默认以json的格式存于res中
          console.log("收到了心知天气今天的天气信息")
          console.log(res);
          //写业务逻辑：
          //1.更改顶部时间
          let topTime = res.results[0].last_update;//2025-06-07T08:54:07+08:00
          // console.log(topTime)
          //顶部时间以T分割
          let str = topTime.split("T");
          //现将当前时间存起来(后面会使用到)
          now_time = str[0];

          // console.log(str[0])
          //更改时间
          $(".now_date").text(str[0]);

          //2.更改今天天气信息框
          //2.1温度
          // console.log(res.results[0].now.temperature)
          $(".temp").text(res.results[0].now.temperature);
          //2.2天气图标（调用天气图标函数）
          // console.log(res.results[0].now.text)
          /**
           * 注意：jquery获取属性值的语法：$("选择器").attr("属性");
           * attr() 返回 HTML 中定义的属性值（相对路径）
           * 修改属性值
           * jQuery：attr("旧的属性", "新的属性值") 简单易用
           *  eg:元素.attr("src", "new_value")
           */
          // console.log( $(".weather_icon").attr("src"))
          setWeatherIcon( $(".weather_icon"),res.results[0].now.text);
          //2.3天气现象
          $(".weather-type").text(res.results[0].now.text);
          //由于我不是vip所以以下东西使用openWeather的
          //2.4体感温度
          //2.5相对湿度
          //2.6风力等级
          //2.7气压
          //2.8能见度
        },
        //失败回调
        error: function(error) {
          console.error("请求失败：", error);
        }
      });
    }

    //2.获得当前天气的信息(参数是经纬度)
    function getCurrentWeatherOfOpenWeather(jinDu,weiDu) {
      //向OpenWeather api请求数据
      $.ajax({
        //1.OpenWeather 请求当前天气信息
        url: "https://api.openweathermap.org/data/2.5/weather",//请求当前天气信息
        //2.HTTP 请求方法
        method: "get",
        //3.发送到服务器的数据
        data: {
          lat: jinDu, //经度
          lon: weiDu, //维度
          appid: open_weather_api_key
        },

        //4.成功返回数据
        /**
         * @param res 接受返回的json对象
         */
        success: function(res) {  //预期返回的数据默认以json的格式存于res中
          console.log("收到了openWeather今天天气")
          console.log(res);
          //写业务逻辑：
          //2.4体感温度
          /**
           * 开尔文与摄氏度的换算关系 ：摄氏度 = 开尔文 - 273.15
           */
                  // console.log(res.main.feels_like);
                  // console.log(res.main.feels_like - 273.15);
                  //取整Math.floor() - 向下取整
                  // console.log(Math.floor(res.main.feels_like - 273.15));
          let body_temp = Math.floor(res.main.feels_like - 273.15);
          $(".perceived_temp").text(body_temp + "°");

          //2.5相对湿度
          $(".rela_humidity").text(res.main.humidity + "%");

          //2.6风速
          $(".wind_level").text(res.wind.speed);

          //2.7气压
          $(".pressure").text(res.main.pressure + "hPa");

          //2.8能见度
          $(".visibility").text(res.visibility + "米");
        },
        //5失败回调
        error: function(error) {
          console.log("没收到openWeather今天天气")
          console.error("请求失败：", error);
        }
      });
    }


    //3.今天整时天气和未来3天的天气(参数是经纬度)
    function getCurrentIntegerAndFutureData(jinDu,weiDu) {
      //向OpenWeather api请求数据
      $.ajax({
        //1.OpenWeather 请求今天整时天气和未来3天的天气API服务地址
        //官方说明：全球任何地方都可以获得 5 天预报。 它包括以 3 小时为步长的天气预报数据
        url: "http://api.openweathermap.org/data/2.5/forecast",//请求今天整时天气、未来3天的天气
        //2.HTTP 请求方法
        method: "get",
        //3.发送到服务器的数据
        data: {
          lat: jinDu, //经度
          lon: weiDu, //维度
          appid: open_weather_api_key
        },

        //4.成功返回数据
        /**
         * @param res 接受返回的json对象
         */
        success: function(res) {  //预期返回的数据默认以json的格式存于res中
          console.log("收到了openWeather今天和未来三天")
          console.log(res);
          //写业务逻辑：
          //1.根据今天的时间和json对象res更新整点预报
          setIntegerDataByNowTimeAndRes(now_time,res);

          //2.根据今天的时间和json对象res更新和未来三天预报
          setFutureDataByNowTimeAndRes(now_time,res);
        },
        //5失败回调
        error: function(error) {
          console.log("没收到openWeather今天和未来三天")
          console.error("请求失败：", error);
        }
      });
    }

    //4.获得当前天气的空气质量
    function getCurrentCityAirQuality(city) {
      //向OpenWeather api请求数据
      $.ajax({
        //1.OpenWeather 请求当前天气的空气质量API服务地址
        url: "https://api.openweathermap.org/data/2.5/air_pollution",//空气质量
        //2.HTTP 请求方法
        method: "get",
        //3.发送到服务器的数据
        data: {
          lat: jinDu, //经度
          lon: weiDu, //维度
          appid: open_weather_api_key
        },

        //4.成功返回数据
        /**
         * @param res 接受返回的json对象
         */
        success: function(res) {  //预期返回的数据默认以json的格式存于res中
          console.log("收到了openWeather今天的空气质量")
          console.log(res);
          //写业务逻辑：
          //更新空气质量，模块

          //1.空气指数数字、颜色、空气等级和评价描述
          /**
           * Math.trunc()
           * 特点：直接删除小数部分，不进行四舍五入。
           */
          let numLev =Math.trunc( res.list[0].main.aqi);//获取空气指数
          //根据指数等级设置数字、颜色、空气等级和评价描述
          setNumberColorByLevel(numLev);

          //2.空气质量参数
          //pm2.3
          let pm2_5 = Math.trunc( res.list[0].components.pm2_5);
          $(".pm2_5").text(pm2_5 + "μg/m³");
          //pm10
          let pm10 = Math.trunc( res.list[0].components.pm10);
          $(".pm10").text(pm10 + "μg/m³");
          //no2
          let no2 = Math.trunc( res.list[0].components.no2);
          $(".no2").text(no2 + "μg/m³");
          //co
          let co = Math.trunc( res.list[0].components.co);
          $(".co").text(co + "mg/m³");
          //o3
          let o3 = Math.trunc( res.list[0].components.o3);
          $(".o3").text(o3 + "μg/m³");
        },
        //5失败回调
        error: function(error) {
          console.log("没收到openWeather今天的空气质量")
          console.error("请求失败：", error);
        }
      });
    }


    /**
     * 修改天气图标函数
     * @returns {number}
     * @param box 对应的元素
     * @param res 请求返回的结值
     */
    function setWeatherIcon(box,res) {
      if ((res === "晴") || (res === "few clouds")) {
        box.attr("src", "./image/qing.png")
      } else if ((res === "多云") || (res === "few clouds") || (res === "scattered clouds") || (res === "broken clouds")) {
        box.attr("src", "./image/duoyun.png")
      } else if ((res === "阴") || (res === "overcast clouds")) {
        //修改crs属性值：使用jQuery：attr("src", "new_value") 简单易用;
        box.attr("src", "./image/yins.png")
      } else if ((res === "小雨") || (res === "light rain")) {
        box.attr("src", "./image/xiaoyu.png")
      } else if ((res === "中雨") || (res === "moderate rain")) {
        box.attr("src", "./image/zhongyu.png")
      } else if ((res === "大雨") || (res === "heavy rain") || (res === "very heavy rain") || (res === "extreme rain")) {
        box.attr("src", "./image/dayu.png")
      } else if ((res === "阵雨") || (res === "shower rain") || (res ==="light shower rain") || (res ==="heavy shower rain")) {
        box.attr("src", "./image/zhenyu.png")
      } else if ((res === "小雪") || (res === "light snow")) {
        box.attr("src", "./image/xiaoxue.png")
      } else if ((res === "中雪") || (res === "snow")) {
        box.attr("src", "./image/zhongxue.png")
      } else if ((res === "大雪") || (res === "heavy snow")) {
        box.attr("src", "./image/daxue.png")
      } else if ((res === "阵雪") || (res === "sleet")) {
        box.attr("src", "./image/zhenxue.png")
      } else if (res === "雷") {
        box.attr("src", "./image/leiyu.png")
      } else if (res === "霾") {
        box.attr("src", "./image/mai.png")
      } else if (res === "雾") {
        box.attr("src", "./image/wu.png")
      }
    }


    /**
     * 根据指数等级设置数字、颜色、空气等级和评价描述
     * @param tmp 指数等级
     */
    function setNumberColorByLevel(tmp) {
      //获取空气指数数字元素
      let aqi_num = $(".api_number");
      //获取空气等级元素
      let aqi_lev =  $(".api_level");
      //获取质量评价描述元素
      let aqi_text = $(".aqi_text");
      if (tmp === 1) {
        //更新数字
        aqi_num.text("Ⅰ");
        //更新颜色
        //使用 jQuery 的 .css("属性","属性值") 方法
        aqi_num.css("color","#92d050");
        //更新等级
        aqi_lev.text("优");
        //更新评价描述
        aqi_text.text("🌿 '优级空气'：阳光与微风共舞，每一口呼吸都是自然的馈赠，全域畅享清新怡然的生态礼遇。")
      } else if (tmp === 2) {
        //更新数字
        aqi_num.text("Ⅱ");
        //更新颜色
        //使用 jQuery 的 .css("属性","属性值") 方法
        aqi_num.css("color","#ffff00");
        //更新等级
        aqi_lev.text("良");
        //更新评价描述
        aqi_text.text("🍃 '良好空气'：风轻云净的日常基调，细微处藏着自然的温柔，适宜全民自在舒展，拥抱舒适生活。")
      } else if (tmp === 3) {
        //更新数字
        aqi_num.text("Ⅲ");
        //更新颜色
        //使用 jQuery 的 .css("属性","属性值") 方法
        aqi_num.css("color","#ffc000");
        //更新等级
        aqi_lev.text("中等");
        //更新评价描述
        aqi_text.text("⚠️ '轻度污染'：空气微染轻尘，敏感人群需稍作防护。建议减少露天久留，让呼吸在澄明空间中保持顺畅。")
      } else if (tmp === 4) {
        //更新数字
        aqi_num.text("Ⅳ");
        //更新颜色
        //使用 jQuery 的 .css("属性","属性值") 方法
        aqi_num.css("color","#ff0000");
        //更新等级
        aqi_lev.text("低");
        //更新评价描述
        aqi_text.text("🔴 '中度污染'：空气中的颗粒悄然累积，儿童、老人及敏感群体宜暂避户外。守护呼吸健康，从减少暴露开始。")
      } else {
        //更新数字
        aqi_num.text("Ⅴ");
        //更新颜色
        //使用 jQuery 的 .css("属性","属性值") 方法
        aqi_num.css("color","#a42c9e");
        //更新等级
        aqi_lev.text("非常低");
        //更新评价描述
        aqi_text.text("⚫️ '重度污染'：空气警钟已然敲响，污染浓度显著升高。请全体人员减少非必要外出，共同期待清风驱散浊霭的时刻。")
      }
    }


    /**
     * 根据今天的时间和json对象res更新整点预报
     * @param now_time 今天的时间
     * @param res json对象res
     */
    function setIntegerDataByNowTimeAndRes(now_time, res) {
      // 定义起始点(从今天开始的)
      let currentDate = now_time;
      let temp_index = -1;

      /**
       * 查找第一个起始点匹配项
       * startsWith(str)判断一个字符串是否以指定的字符str开头
       */
      for (let i = 0; i < res.list.length; i++) {
        if (res.list[i].dt_txt.startsWith(currentDate)) {//找到今天的就返回
          temp_index = i;
          break;
        }
      }

      // 处理当日所有数据点
      if (temp_index !== -1) {
        for (let j = temp_index; j < res.list.length; j++) {
          if (!res.list[j].dt_txt.startsWith(currentDate)) {//不是今天的时间就退出
            break;
          }

          // 提取小时数 (15/18/21等)
          let str = res.list[j].dt_txt.split(" ");
          let str1 = str[1].split(":");
          let hour = parseInt(str1[0],10);//以10进制解析出来

          console.log(hour);

          setIntegerDataByTime(hour, res, j);

        }
      }

      /****************************未来3天******************************/
        // if (date === now_time) {//找到时间后 往后数三天
        //   let count = 1;
        //   let current_date = now_time;//存储当前时间
        //   let date1 = "1979-01-01";
        //   for (let j = 0; (j < res.list.length) && (date !== now_time) && (count <= 3); j++) {
        //     let str1 = res.list[j].dt_txt.split(" ");//以空格切割
        //     date1 = str1[0];//获得日期
        //     if( (date1 !== current_date)) {
        //       //更新当前时间
        //       current_date = date1;
        //       //根据日期设置未来三天的数据
        //       setFutureDataByDate(date1, res, count);
        //       count++;
        //     }
        //   }
        // }


    }

    /**
     * 根据今天的时间和json对象res更新和未来三天预报
     * @param now_time 今天的时间
     * @param res json对象res
     */
    function setFutureDataByNowTimeAndRes(now_time,res) {
      //本案例不考虑跨月

      // 定义起始点(从今天的后一天开始)
      let currentDate = now_time;
      let temp_index = -1;

      /**
       * 查找第一个今天起始点匹配项（写这个函数的作用是防止日期从昨天开始）
       * startsWith(str)判断一个字符串是否以指定的字符str开头
       */
      for (let i = 0; i < res.list.length; i++) {
        if (res.list[i].dt_txt.startsWith(currentDate)) {//找到今天的就返回
          temp_index = i;
          break;
        }
      }

      /*
      查找第一个非今天起始点匹配项（从temp_inde开始）
      startsWith(str)判断一个字符串是否以指定的字符str开头
       */
      if (temp_index !== -1) {
        for (let j = temp_index; j < res.list.length; j++) {
          if (!res.list[j].dt_txt.startsWith(currentDate)) {//第一个不是今天的时间就退出
            temp_index = j;
            break;
          }
        }
      }

      /**
       * 从第一个非今天开始往后面遍历
       */
      let count = 1;//只取未来三天
      if (temp_index !== -1) {
        //上一次的日(以10进制解析)
        let last = parseInt(res.list[temp_index].dt_txt.split(" ")[0].split("-")[2],10) - 1;

        for (let k = temp_index; k < res.list.length; k++) {
          let current =  parseInt(res.list[k].dt_txt.split(" ")[0].split("-")[2],10);//现在的日
          if (current === last) {
           continue;
          }
          if (count > 3) {
            break;
          }
          //根据日期设置未来三天的数据
          setFutureDataByDate(current, res, count,k);
          last++;
          count++;
        }
      }

    }

    /**
     * 根据时间设置今天整点的数据
     * @param Hours 时间
     * @param res json对象res
     * @param j 当前的日
     */
    function setIntegerDataByTime(Hours, res, j) {
      // 选择第 3 个列表项（从 1 开始计数）
      // $(".integer_item:nth-child(3)")
      let result = res.list[j].weather[0].description;//得到天气现象
      if(Hours === 3) {
        // 选择第一个列表项中的 img 元素$("".integer_item:nth-child(1) img.integer_icon"")
        let tmp = $(".integer_item:nth-child(1) img.integer_icon");//得到指定元素
        //更改图标
        setWeatherIcon(tmp, result);

        //更改温度
        let tmp1 = $(".integer_item:nth-child(1) .integer_temp");//得到指定元素
        tmp1.text(Math.floor(res.list[j].main.temp - 273.15) + "°");

        //更改风向
        let tmp2 = $(".integer_item:nth-child(1) .wind_direction");//得到指定元素
        let result2 = res.list[j].wind.deg;//得到风向 返回的是数值（需要使用以下函数判断）
        setWindDeg(tmp2, result2);
      } else if(Hours === 6) {
        // 选择第一个列表项中的 img 元素$("".integer_item:nth-child(1) img.integer_icon"")
        let tmp = $(".integer_item:nth-child(2) img.integer_icon");//得到指定元素
        //更改图标
        setWeatherIcon(tmp, result);

        //更改温度
        let tmp1 = $(".integer_item:nth-child(2) .integer_temp");//得到指定元素
        tmp1.text(Math.floor(res.list[j].main.temp - 273.15) + "°");

        //更改风向
        let tmp2 = $(".integer_item:nth-child(2) .wind_direction");//得到指定元素
        let result2 = res.list[j].wind.deg;//得到风向 返回的是数值（需要使用以下函数判断）
        setWindDeg(tmp2, result2);
      } else if(Hours === 9) {
        // 选择第一个列表项中的 img 元素$("".integer_item:nth-child(1) img.integer_icon"")
        let tmp = $(".integer_item:nth-child(3) img.integer_icon");//得到指定元素
        //更改图标
        setWeatherIcon(tmp, result);

        //更改温度
        let tmp1 = $(".integer_item:nth-child(3) .integer_temp");//得到指定元素
        tmp1.text(Math.floor(res.list[j].main.temp - 273.15) + "°");

        //更改风向
        let tmp2 = $(".integer_item:nth-child(3) .wind_direction");//得到指定元素
        let result2 = res.list[j].wind.deg;//得到风向 返回的是数值（需要使用以下函数判断）
        setWindDeg(tmp2, result2);
      } else if(Hours === 12) {
        // 选择第一个列表项中的 img 元素$("".integer_item:nth-child(1) img.integer_icon"")
        let tmp = $(".integer_item:nth-child(4) img.integer_icon");//得到指定元素
        //更改图标
        setWeatherIcon(tmp, result);

        //更改温度
        let tmp1 = $(".integer_item:nth-child(4) .integer_temp");//得到指定元素
        tmp1.text(Math.floor(res.list[j].main.temp - 273.15) + "°");

        //更改风向
        let tmp2 = $(".integer_item:nth-child(4) .wind_direction");//得到指定元素
        let result2 = res.list[j].wind.deg;//得到风向 返回的是数值（需要使用以下函数判断）
        setWindDeg(tmp2, result2);
      } else if(Hours === 15) {
        // 选择第一个列表项中的 img 元素$("".integer_item:nth-child(1) img.integer_icon"")
        let tmp = $(".integer_item:nth-child(5) img.integer_icon");//得到指定元素
        //更改图标
        setWeatherIcon(tmp, result);

        //更改温度
        let tmp1 = $(".integer_item:nth-child(5) .integer_temp");//得到指定元素
        tmp1.text(Math.floor(res.list[j].main.temp - 273.15) + "°");

        //更改风向
        let tmp2 = $(".integer_item:nth-child(5) .wind_direction");//得到指定元素
        let result2 = res.list[j].wind.deg;//得到风向 返回的是数值（需要使用以下函数判断）
        setWindDeg(tmp2, result2);
      } else if(Hours === 18) {
        // 选择第一个列表项中的 img 元素$("".integer_item:nth-child(1) img.integer_icon"")
        let tmp = $(".integer_item:nth-child(6) img.integer_icon");//得到指定元素
        //更改图标
        setWeatherIcon(tmp, result);

        //更改温度
        let tmp1 = $(".integer_item:nth-child(6) .integer_temp");//得到指定元素
        tmp1.text(Math.floor(res.list[j].main.temp - 273.15) + "°");

        //更改风向
        let tmp2 = $(".integer_item:nth-child(6) .wind_direction");//得到指定元素
        let result2 = res.list[j].wind.deg;//得到风向 返回的是数值（需要使用以下函数判断）
        setWindDeg(tmp2, result2);
      } else {//Hours === 21
        // 选择第一个列表项中的 img 元素$("".integer_item:nth-child(1) img.integer_icon"")
        let tmp = $(".integer_item:nth-child(7) img.integer_icon");//得到指定元素
        //更改图标
        setWeatherIcon(tmp, result);

        //更改温度
        let tmp1 = $(".integer_item:nth-child(7) .integer_temp");//得到指定元素
        tmp1.text(Math.floor(res.list[j].main.temp - 273.15) + "°");

        //更改风向
        let tmp2 = $(".integer_item:nth-child(7) .wind_direction");//得到指定元素
        let result2 = res.list[j].wind.deg;//得到风向 返回的是数值（需要使用以下函数判断）
        setWindDeg(tmp2, result2);
      }
    }

    /**
     *
     * @param tmp2 指定元素
     * @param num 得到风向
     */
    function setWindDeg(tmp2, num) {
      // 使用纯 if-else 结构
      if (num >= 0 && num < 22.5) {
        tmp2.text("北风");
      } else if (num >= 22.5 && num < 67.5) {
        tmp2.text("东北风");
      } else if (num >= 67.5 && num < 112.5) {
        tmp2.text("东风");
      } else if (num >= 112.5 && num < 157.5) {
        tmp2.text("东南风");
      } else if (num >= 157.5 && num < 202.5) {
        tmp2.text("南风");
      } else if (num >= 202.5 && num < 247.5) {
        tmp2.text("西南风");
      } else if (num >= 247.5 && num < 292.5) {
        tmp2.text("西风");
      } else if (num >= 292.5 && num < 337.5) {
        tmp2.text("西北风");
      } else {// 337.5 <= num <= 360
        tmp2.text("北风");
      }
    }


    /**
     * 根据日期设置未来三天的数据
     * @param date1 日期
     * @param res json对象
     * @param count 天数（用于选择元素）
     * @param k 当前的下标
     */
    function setFutureDataByDate(date1, res, count, k) {
      //使用模版字符串进行拼接： `.future_item:nth-child(${count})`
      //得到日期元素
      let future_date =  $(`.future_item:nth-child(${count}) .future_date`);
      let str = res.list[k].dt_txt.split(" ");
      future_date.text(str[0]);

      //得到图标元素
      let icon = $(`.future_item:nth-child(${count}) img.future_icon`);
      let dec = res.list[k].weather[0].description;//得到天气现象
      console.log(dec)
      setWeatherIcon(icon, dec);


      //最高温度元素
      let max_temp =  $(`.future_item:nth-child(${count}) .high-temp`);
      max_temp.text(Math.floor(res.list[k].main.temp_max - 273.15) + "°")

      //最低温度元素
      let min_temp =  $(`.future_item:nth-child(${count}) .low-temp`);
      min_temp.text(Math.floor(res.list[k].main.temp_min - 273.15) + "°")

      //天气现象元素
      let weather =  $(`.future_item:nth-child(${count}) .weather_type`);
      //更新天气现象
      setWeatherDec(weather, dec);

      //风向元素
      let wind =  $(`.future_item:nth-child(${count}) .wind_direction`);
      let deg = res.list[k].wind.deg;//得到风向
      setWindDeg(wind,deg);
    }


    /**
     * 更新天气现象
     * @param weather 天气元素
     * @param dec 得到的天气现象
     */
    function setWeatherDec(weather, dec) {
      if (dec === "few clouds") {
        weather.text("晴");
      } else if (dec === ("few clouds") || dec === ("scattered clouds") || dec === ("broken clouds")) {
        weather.text("多云");
      } else if (dec === "overcast clouds") {
        weather.text("阴");
      } else if (dec === "light rain") {
        weather.text("小雨");
      } else if (dec === "moderate rain") {
        weather.text("中雨");
      } else if ((dec === "heavy rain") || (dec === "very heavy rain") || (dec === "extreme rain")) {
        weather.text("大雨");
      } else if ((dec === "shower rain") || (dec ==="light shower rain") || (dec ==="heavy shower rain")) {
        weather.text("阵雨");
      } else if (dec === "light snow") {
        weather.text("小雪");
      } else if (dec === "snow") {
        weather.text("中雪");
      } else if (dec === "heavy snow") {
        weather.text("大雪");
      } else if (dec === "sleet") {
        weather.text("阵雪");
      } else {
        weather.text("晴");
      }
    }
    /*******************************end****************************/
  });

</script>
</body>
</html>